<template>
    <!-- 选择刻印套装时-->
    <!-- 接收参数 groupViewShow是否显示-->
    <!-- 返回事件 close select-->
    <van-popup v-if="isShow" v-model="isShow" closeable round position="bottom" :style="{ height: '60%' }">
        <!-- 套一个小的略小的div 适配滚动条和外圈的圆角 -->
        <div class="popup-container">
            <div class="popup-title-container">
                <h3>选择刻印</h3>
                <van-row class="margin-top">
                    <van-radio-group v-model="radio" direction="horizontal">
                        <van-radio name="0">全&nbsp;&nbsp;部</van-radio>
                        <van-radio name="1">属性类</van-radio>
                        <van-radio name="2">机制类</van-radio>
                        <van-radio name="3">通用类</van-radio>
                        <van-radio name="4">过渡类</van-radio>
                    </van-radio-group>
                </van-row>
            </div>

            <van-grid square :gutter="25" clickable :column-num="4">
                <van-grid-item v-for="(item) in engrLists" :key="item.id" :text="item.name" 
                    v-show="isItemShow(item)"
                    @click="onSelect(item)">
                    <template #icon>
                        <van-image :src="item.icon" />
                    </template>
                </van-grid-item>
            </van-grid>
        </div>
    </van-popup>

</template>

<script>
import { SearchServer } from '../../server/servers';

export default {
    name: "",
    props: {
        groupViewShow: Boolean
    },

    beforeUpdate() {
        if (this.engrLists == null) {
            this.query();
        }
    },

    computed: {
        isShow: {
            get() {
                return this.groupViewShow;
            },
            set(val) {
                if (!val) {
                    this.$emit("close");
                }
            }
        }
    },

    data() {
        return {
            engrLists: null,
            radio: '0',
        }
    },

    methods: {
        onSelect(item) {
            this.$emit("select", item);
            this.$emit("close");
        },

        //查询engrLists
        query() {
            this.engrLists = SearchServer.queryAllNames();
        },

        isItemShow(item) {
            if (this.radio == '0') {
                return true;
            }

            switch (this.radio) {
                case "1": //属性类
                    return "光,暗,雷,冰,火,水,风,物理".match(item.type);

                case "2": //机制类
                    return "神能,怒气,能量,印记".match(item.type);

                case "3": //通用类
                    return item.type == "通用"

                case "4": //过渡类
                    return item.type == "过渡"
            }

            return false;
        }
    }
}

</script>

<style scoped>
.popup-container {
    /* position: relative; */
    width: 99%;
    height: 80%;
    overflow-y: scroll;
    margin-top: 80px;
}

* {
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.popup-title-container {
    position: absolute;
    width: 500px;
    top: 12px;
    left: 0px;
}

.popup-title-container h3 {
    display: block;
    width: 75px;
    margin: auto;
}

.popup-title-container .van-radio{
    width: 18%;
    margin-left:1%;
    margin-right:1% ;
}
</style>
